<template>
  <div class="cantact-body">
    <p>门店地址</p>
    <div class="address">
      <img :src="map" alt="" />
      <p>香港九龍深水埗長沙灣道226-242號深之都商場二樓92號舖</p>
      <div class="address-item">
        <van-icon name="phone-o" size="14" />
        <span>+852 67603172 </span>
      </div>
      <div class="address-item">
        <van-icon name="wechat" size="14" color="#04BE02" />
        <span>+852 67603172 </span>
      </div>
      <div class="address-item">
        <van-icon name="phone-circle-o" size="14" />
        <span>+852 67603172 </span>
      </div>
      <div class="address-item">
        <van-icon name="envelop-o" size="14" />
        <span>xchange@pointlink.vip </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.map = require("@/assets/map.png");
  },
  data() {
    return {
      map: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.cantact-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  p:first-child {
    font-weight: bold;
  }
  p {
    font-size: 16px;
    font-family: Source Han Sans CN;
    color: #333333;
    line-height: 25px;
    text-align: left;
    margin-bottom: 6px;
    width: 100%;
  }
  .address {
    display: flex;
    flex-direction: column;
    padding: 0 18px;
    align-items: flex-start;
    img {
      width: 100%;
      margin-top: 50px;
    }
    p {
      margin-top: 30px;
      line-height: 25px;
      font-size: 14px;
    }
    .address-item {
      margin-top: 14px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        color: #666666;
        line-height: 18px;
        margin-left: 3px;
      }
    }
  }
}
</style>